<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="competitionName" label="参赛名称" width="180" />
      <el-table-column prop="level" label="赛制级别" width="180" />
      <el-table-column prop="organizer" label="组织单位" width="180" />
      <el-table-column prop="location" label="参赛地点" width="180" />
      <el-table-column prop="competitionDate" label="参赛时间" width="180" />
      <el-table-column prop="awardLevel" label="获奖等级" width="180" />
      <el-table-column prop="participants" label="参与人名单" width="180" />
      <el-table-column prop="instructor" label="指导教师" width="180" />
      <el-table-column prop="certificate" label="证书及证明材料" width="180" />
      <el-table-column prop="reportDate" label="填报日期" width="180" />
      <el-table-column prop="auditStatus" label="审核状态" width="180" />
      <el-table-column prop="feedback" label="反馈原因" width="180" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button round type="warning" @click="handleReview(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogReviewVisible" title="审核参赛信息">
      <el-form ref="reviewFormRef" :model="reviewForm" :rules="rules" label-width="100px" class="ruleForm" status-icon>
        <el-form-item label="参赛名称" prop="competitionName">
          <el-input v-model="reviewForm.competitionName"/>
        </el-form-item>
        <el-form-item label="赛制级别" prop="level">
          <el-input v-model="reviewForm.level"/>
        </el-form-item>
        <el-form-item label="组织单位" prop="organizer">
          <el-input v-model="reviewForm.organizer"/>
        </el-form-item>
        <el-form-item label="参赛地点" prop="location">
          <el-input v-model="reviewForm.location"/>
        </el-form-item>
        <el-form-item label="参赛时间" prop="competitionDate">
          <el-date-picker v-model="reviewForm.competitionDate" type="date" placeholder="选择日期"/>
        </el-form-item>
        <el-form-item label="获奖等级" prop="awardLevel">
          <el-input v-model="reviewForm.awardLevel"/>
        </el-form-item>
        <el-form-item label="参与人名单" prop="participants">
          <el-input v-model="reviewForm.participants"/>
        </el-form-item>
        <el-form-item label="指导教师" prop="instructor">
          <el-input v-model="reviewForm.instructor"/>
        </el-form-item>
        <el-form-item label="证书及证明材料" prop="certificate">
          <el-input v-model="reviewForm.certificate"/>
        </el-form-item>
        <el-form-item label="填报日期" prop="reportDate">
          <el-date-picker v-model="reviewForm.reportDate" type="date" placeholder="选择日期"/>
        </el-form-item>
        <el-form-item label="审核状态" prop="auditStatus">
          <el-select v-model="reviewForm.auditStatus" placeholder="请选择">
            <el-option label="通过" value="通过"></el-option>
            <el-option label="不通过" value="不通过"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="反馈原因" prop="feedback" v-if="reviewForm.auditStatus === '不通过'">
          <el-input v-model="reviewForm.feedback"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogReviewVisible=false">取消</el-button>
          <el-button type="primary" @click="handleReviewConfirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, watch } from "vue";
import axios from "axios";

const tableData = ref([]);

const getList = async (query = "") => {
  try {
    const res = query ?
        await axios.get(`http://localhost:8000/adminapi/competitions?competitionName=${query}`) :
        await axios.get('http://localhost:8000/adminapi/competitions');
    tableData.value = res.data;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

const rules = reactive({
  competitionName: [{ required: true, message: '请输入参赛名称', trigger: 'blur' }],
  level: [{ required: true, message: '请输入赛制级别', trigger: 'blur' }],
  organizer: [{ required: true, message: '请输入组织单位', trigger: 'blur' }],
  location: [{ required: true, message: '请输入参赛地点', trigger: 'blur' }],
  competitionDate: [{ required: true, message: '请选择参赛时间', trigger: 'change' }],
  awardLevel: [{ required: true, message: '请输入获奖等级', trigger: 'blur' }],
  participants: [{ required: true, message: '请输入参与人名单', trigger: 'blur' }],
  instructor: [{ required: true, message: '请输入指导教师', trigger: 'blur' }],
  certificate: [{ required: true, message: '请输入证书及证明材料', trigger: 'blur' }],
  reportDate: [{ required: true, message: '请选择填报日期', trigger: 'change' }],
  auditStatus: [{ required: true, message: '请选择审核状态', trigger: 'change' }],
  feedback: [{ required: false, message: '请输入反馈原因', trigger: 'blur' }]
});

onMounted(() => {
  getList();
});

const dialogReviewVisible = ref(false);
const reviewFormRef = ref();
const currentItem = ref();
const reviewForm = reactive({
  competitionName: "",
  level: "",
  organizer: "",
  location: "",
  competitionDate: "",
  awardLevel: "",
  participants: "",
  instructor: "",
  certificate: "",
  reportDate: "",
  auditStatus: "",
  feedback: ""
});

watch(() => reviewForm.auditStatus, (newValue) => {
  rules.feedback[0].required = newValue === '不通过';
});

const handleReview = (item) => {
  dialogReviewVisible.value = true;
  Object.assign(reviewForm, item);
  currentItem.value = item;
};

const handleReviewConfirm = async () => {
  try {
    await reviewFormRef.value.validate(async (valid) => {
      if (valid) {
        dialogReviewVisible.value = false;
        if (currentItem.value.id !== undefined) {
          await axios.put(`http://localhost:8000/adminapi/competitions/${currentItem.value.id}`, reviewForm);
          await getList();
        } else {
          console.error('Competition ID is undefined');
        }
      }
    });
  } catch (error) {
    console.error('Error updating competition:', error.response.data);
  }
};
</script>
